<script setup lang="ts">
import { useCountStore } from '~/stores'

const props = defineProps<{
  initial: number
}>()
const countStore = useCountStore()
const { count, inc, dec } = useCounter(props.initial)
</script>

<template>
  <div my-10 flex-center space-x-10>
    <div space-x-4>
      <h2 text-x mb2>
        useCounter
      </h2>
      <span class="count">{{ count }}</span>
      <button class="inc btn" @click="inc()">
        +
      </button>
      <button class="dec btn" @click="dec()">
        -
      </button>
    </div>
    <div space-x-4>
      <h2 text-x mb2>
        Store Count
      </h2>
      {{ countStore.count }} {{ countStore.dobule }}
      <button class="btn" @click="countStore.increment">
        +
      </button>
    </div>
  </div>
</template>
